<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <p>Drag the bar to change its width:</p>
        <div style="background: orange; width: 60px; height: 20px">
        </div>
        <script>
            let lastX; // Tracks the last observed mouse X position
            let bar = document.querySelector("div");
            bar.addEventListener("mousedown", event => {
                if (event.button == 0) {
                    lastX = event.clientX;
                    window.addEventListener("mousemove", moved);
                    event.preventDefault(); // Prevent selection
                }
            });


            function moved(event) {
                if (event.buttons == 0) {
                    window.removeEventListener("mousemove", moved);
                } else {
                    let dist = event.clientX - lastX;
                    let newWidth = Math.max(10, bar.offsetWidth + dist);
                    bar.style.width = newWidth + "px";
                    lastX = event.clientX;
                }
            }
        </script>
    </body>

</html>